<template>
    <div class="project">
        <div class="project-top mb-20">
            <Breadcrumb router />
            <div class="row f f-ac">
                <div class="row-title">检索：</div>
                <div class="f-1">
                    <el-input v-model="queryForm.search" placeholder="输入关键词" size="small" clearable style="width: 408px"
                        @change="search" />
                </div>
            </div>
            <!-- <div class="row f f-ac">
                <div class="row-title">地级市：</div>
                <div class="f-1">
                    <div v-for="(i, k) in cityList" :key="k" class="type-item"
                        :class="{ checked: queryForm.city == i.value }" @click="handleCity(i)">
                        {{ i.label || "-" }}
                    </div>
                </div>
            </div> -->
            <!-- <div class="row f f-ac" v-if="id != '5'">
                <div class="row-title">类别</div>
                <div class="f-1">
                    <div v-for="(i, k) in typeList" :key="k" class="type-item" :class="{ checked: id == i.id }"
                        @click="handleType(i)">
                        {{ i.name || "-" }}
                    </div>
                </div>
            </div> -->
        </div>
        <div v-for="(i, k) in tabList" :key="k" class="category" :class="{ checked: queryForm.type == i.value }"
            @click="handleCategory(i)">
            {{ i.label || "-" }}
        </div>
        <div class="project-bottom">
            <div class="project-box f f-js f-w">
                <div v-for="(i, k) in dataList" :key="k" class="project-item" @click="handleDetail(i)">
                    <img :src="baseUrl+i.image" />
                    <div class="item-title line-1">{{ i.title || "-" }}</div>
                    <div class="item-row line-1">申报地区：{{ i.address || "-" }}</div>
                    <div class="item-row line-1">{{ i.createtime || "-" }}</div>
                </div>
            </div>
            <Page-tool :size="queryForm.pageSize" :page="queryForm.currentPage" :total="total"
                @change-page="changePage" />
        </div>
    </div>
</template>

<script>
    import {
        heritageList,
        heritageCategory,
        // category_ally
    } from "@/utils/heritage/index.js";
    export default {
        data() {
            return {
                id: '',
                baseUrl: process.env.VUE_APP_BASE_API,
                queryForm: {
                    search: "", // 搜索关键词
                    city: "", // 地级市
                    type: "", // 类型
                    category: "", // 类别
                    pageSize: 12, // 条数
                    currentPage: 1, // 页数
                },
                tabList: [{
                        label: "上新",
                        value: ""
                    },
                    {
                        label: "人气",
                        value: "like"
                    },
                ],
                total: 0, // 总数
                cityList: [],
                // typeList: [],
                dataList: [],
            };
        },
        created() {
            if (this.id == '') {
                this.id = this.$route.query.type;
                // this.getTypeList();
                this.getList();
            }
        },
        watch: {
            '$route.query'(v) {
                this.id = v.type
                // this.getTypeList();
                this.getList();
            }
        },
        methods: {
            search() {
                this.queryForm.currentPage = 1;
                this.getList();
            },
            // 获取项目列表
            getList() {
                let that = this
                let data = {
                    heritage_category_id: that.id,
                    title: that.queryForm.search,
                    type: that.queryForm.type,
                    page: that.queryForm.currentPage,
                    limit: 12,
                    recommend: ''
                }

                // console.log(data.type.length,'ddddd')
                // return
                heritageList(data).then((response) => {
                    that.dataList = response.data.list
                    that.total = response.data.count
                });
            },
            // 获取项目区域分类
            // getTypeList() {
            //     this.loading = true;
            //     let that = this
            //     category_ally({
            //         id: that.id
            //     }).then((response) => {
            //         if (response.code == 200) {
            //             response.data.unshift({
            //                 id: that.id,
            //                 name: "全部",
            //             });
            //             that.typeList = response.data
            //         }

            //         that.loading = false;
            //     });
            // },
            // 切换城市
            handleCity(v) {
                this.queryForm.city = v.value;
            },
            // 切换分类
            handleType(v) {
                this.id = v.id;
                this.queryForm.currentPage = 1;
                this.getList();
            },
            // 切换类别
            handleCategory(row) {
                this.queryForm.type = row.value;
                this.queryForm.currentPage = 1;
                this.getList();
            },
            // 查看详情
            handleDetail(v) {
                this.$router.push({
                    path: "/cultural/projectDetails",
                    query: {
                        id: v.id,
                        type: this.id
                    },
                });
            },
            // 切换页数
            changePage(page) {
                this.queryForm.currentPage = page;
                this.getList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .project {
        width: 892px;

        .project-top {
            width: 100%;
            border-radius: 8px;
            padding: 20px;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

            .row {
                min-height: 36px;
                width: 100%;
                margin-top: 15px;

                &-title {
                    width: 90px;
                    color: #909090;
                    font-size: 14px;
                }

                .type-item {
                    display: inline-block;
                    min-width: 70px;
                    text-align: center;
                    height: 27px;
                    line-height: 27px;
                    color: #333;
                    background-color: #f4f4f4;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    font-size: 12px;
                    border-radius: 3px;
                    padding: 0 10px;
                    box-sizing: border-box;

                    &:hover {
                        user-select: none;
                        cursor: pointer;
                    }
                }

                .checked {
                    color: #fff;
                    background-color: #193980;
                }
            }
        }

        .category {
            width: 70px;
            height: 27px;
            display: inline-block;
            text-align: center;
            line-height: 27px;
            font-size: 14px;
            border-radius: 8px 8px 0 0;
            background-color: #f4f4f4;

            &:hover {
                cursor: pointer;
            }
        }

        .checked {
            color: #fff !important;
            background-color: #193980 !important;
        }

        .project-bottom {
            width: 100%;
            border-radius: 0 8px 8px 8px;
            padding: 20px;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

            .project-box {
                width: 100%;

                .project-item {
                    margin-right: 26px;
                    margin-bottom: 30px;
                    width: 266px;
                    height: 316px;
                    border-radius: 5px;
                    background-color: #fff;
                    overflow: hidden;
                    box-shadow: 0 1px 10px 0 rgba(217, 217, 217, 0.3);
                    transition: all 0.5s;

                    &:hover {
                        cursor: pointer;
                        box-shadow: 0 1px 10px 0 rgba(130, 130, 130, 0.3);
                    }

                    &:nth-child(3n) {
                        margin-right: 0;
                    }

                    img {
                        width: 100%;
                        height: 212px;
                    }

                    .item-title {
                        height: 23px;
                        color: #313131;
                        font-size: 14px;
                        line-height: 23px;
                        margin: 4px 10px;
                    }

                    .item-row {
                        color: #909090;
                        font-size: 14px;
                        margin: 8px 10px;

                        &:last-child {
                            padding-top: 8px;
                            border-top: 1px solid rgba(217, 217, 217, 0.35);
                        }
                    }
                }
            }
        }
    }
</style>